<template>
    <main role="main">

        <section class="jumbotron text-center">
            <div class="container">
                <h1>Album Course</h1>
                <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
                <p>
                    <!--<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。-->
                    <router-link to="/all/course" class="margin-lr btn btn-primary my-2">All Course</router-link>

                    <a href="#" class="margin-lr btn btn-secondary my-2">Secondary action</a>
                </p>
            </div>
        </section>

        <div class="album py-5 bg-light">
            <div class="container">

                <the-course v-bind:new-courses="newCourses"/>

                <the-course v-bind:on-line="'Hot'"
                            v-bind:idx="'idx'"
                            v-bind:new-courses="hotCourses">
                </the-course>
                <!--pagination可选参数：v-bind:itemCount="8" 不设置默认显示5个按钮，设置最多显示8个按钮-->
                <pagination ref="pagination" v-bind:list="getHotCourses"></pagination>
            </div>
        </div>

    </main>
</template>

<script>
    import TheCourse from "../components/theCourses";
    import Pagination from "../components/pagination";
    export default {
        name: 'index',
        components: {Pagination, TheCourse},
        data: function () {
            return {
                newCourses: [],
                hotCourses: [],
            }
        },
        mounted: function () {
            let _this = this;
            _this.getNewlyReleasedCourses();
            _this.$refs.pagination.size = 3;
            _this.getHotCourses(1);
        },
        methods: {
            /**
             * 获取最新的课程
             */
            getNewlyReleasedCourses: function() {
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER + "/business/album/course/new/courses").then((response)=>{
                    let responseDto = response.data;
                    if (responseDto.success == true) {
                        _this.newCourses = responseDto.content;
                    }

                }).catch((response)=>{
                    console.log("error：", response);
                });
            },

            /**
             * 获取报名数最多的课程
             */
            getHotCourses: function(page) {
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/business/album/course/hot/courses",{
                    page: page,
                    size: _this.$refs.pagination.size,
                }).then((response)=>{
                    let resp = response.data;
                    _this.hotCourses = resp.content.list;
                    _this.$refs.pagination.render(page, resp.content.total);

                }).catch((response)=>{
                    console.log("error：", response);
                });
            },
        },

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .margin-lr{
        margin-left: 2px;
        margin-right: 2px;
    }

    .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    @media (min-width: 768px) {
        .bd-placeholder-img-lg {
            font-size: 3.5rem;
        }
    }
</style>
